<script lang="ts">
    import { onMount } from 'svelte';
    import { navigate } from 'svelte-routing';
    import { writable } from 'svelte/store';
    import { formatDate } from '../../utils/time';
    import { get, post } from '../../utils/api';
    import { addToast } from '../../stores/toastStore';
    import Header from '../../components/garage/Header.svelte';

    let intelligent = ''; // 智能字段
    const formData = writable({
        // 车辆信息
        name: '李四', // 甲方名
        plate_number: '鄂AFG2129', // 车牌号
        item_type: 0, // 车内物品 0随车1留库
        pay_type: 0, // 停车费用 0甲方1提车人
        // 出库信息
        exit_at: '2024-09-23 12:00:00', // 入库时间
        driver_name: '张三', // 提车人-姓名
        driver_id_number: '340824198811205018', // 提车人-身份证号
        driver_phone: '17371086562', // 提车人-电话
    });

    let itemType;
    let payType;
    formData.subscribe(value => {
        itemType = String(value.item_type);
        payType = String(value.pay_type);
    });

    function intelligentParse() { // 智能-解析
        const lines = intelligent.split('\n');
        const data = {};

        lines.forEach(line => {
            const [key, value] = line.split('：');
            if (key && value) {
                switch (key.trim()) {
                case '甲方名':
                    data.name = value.trim();
                    break;
                case '车牌号':
                    data.plate_number = value.trim();
                    break;
                case '车内物品':
                    data.key_present = value.trim() === '留库' ? 1 : 0; // 随车|留库
                    break;
                case '停车费用':
                    data.pay_type = value.trim() === '提车人' ? 1 : 0; // 甲方|提车人
                    break;
                case '提车时间':
                    data.exit_at = value.trim();
                    break;
                case '提车人':
                    data.driver_name = value.trim();
                    break;
                case '提车人身份证号':
                    data.driver_id_number = value.trim();
                    break;
                case '提车人电话':
                    data.driver_phone = value.trim();
                    break;
                default:
                    break;
                }
            }
        });

        formData.set(data);
    }
    function intelligentClear() { // 智能-清空
        intelligent = '';
    }
    function updateItemType(value) { // 车内物品
        formData.update(data => {
            data.item_type = parseInt(value, 10);;

            return data;
        });
    }
    function updatePayType(value) { // 停车费用
        formData.update(data => {
            data.pay_type = parseInt(value, 10);;

            return data;
        });
    }

    const handleSubmit = async () => { // 表单提交
        const data = $formData;
        data['exit_at'] = formatDate(data['exit_at'])

        try {
            const result = await post('/operation/warehouse-exits', data);

            navigate('/warehouse-exit-result?id='+result.data.id)

            addToast('申请成功', 'info', 3000);
        } catch (error) {
            addToast('提交失败'+error, 'error', 3000);
        }
    };

    onMount(() => {
    });
</script>

<main>
    <Header title="出库报备" />
    <div class="p-4">
        <div class="bg-blue-50 p-4 rounded-lg border border-gray-200 shadow-sm mb-4">
            <textarea placeholder="甲方名：甲方名
车牌号：桂XXXX
提车人：张三
提车人电话：158111111111
提车人身份证：372926199601178611
提车时间：2024-09-21 14:00
支付方式：提车人/甲方
车内物品留存情况： 随车带走" class="flex w-full h-48 border-none"></textarea>
            <div class="flex justify-between mt-4">
                <button class="bg-white border border-gray-300 text-gray-600 px-4 py-2 rounded shadow-sm">清空</button>
                <button class="bg-blue-500 text-white px-4 py-2 rounded shadow-sm">智能识别</button>
            </div>
        </div>

        <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
            <div class="form-group mb-4">
                <label class="text-gray-600">甲方名</label>
                <input type="text" class="input-field" placeholder="请输入甲方名" bind:value={$formData.name}>
            </div>
            <div class="form-group mb-4">
                <label class="text-gray-600">车牌号</label>
                <input type="text" class="input-field" placeholder="请输入车牌号" bind:value={$formData.plate_number}>
            </div>
            <div class="form-group mb-4">
                <label class="text-gray-600">车内物品</label>
                <div class="flex items-center mt-1">
                    <label class="mr-2 items-center">
                        <input type="radio" name="item_type" value="0" bind:group={itemType} on:change={() => updateItemType(0)} class="mr-1">随车
                    </label>
                    <label class="items-center">
                        <input type="radio" name="item_type" value="1" bind:group={itemType} on:change={() => updateItemType(1)} class="mr-1">留库
                    </label>
                </div>
            </div>
            <div class="form-group mb-4">
                <label class="text-gray-600">停车费用</label>
                <div class="flex items-center mt-1">
                    <label class="mr-2 items-center">
                        <input type="radio" name="pay_type" value="0" bind:group={payType} on:change={() => updatePayType(0)} class="mr-1">甲方
                    </label>
                    <label class="items-center">
                        <input type="radio" name="pay_type" value="1" bind:group={payType} on:change={() => updatePayType(1)} class="mr-1">提车人
                    </label>
                </div>
            </div>
            <div class="form-group mb-4">
                <label class="text-gray-600">提车人姓名</label>
                <input type="text" class="input-field" placeholder="请输入提车人姓名" bind:value={$formData.driver_name}>
            </div>
            <div class="form-group mb-4">
                <label class="text-gray-600">身份证号</label>
                <input type="text" class="input-field" placeholder="请输入提车人身份证号" bind:value={$formData.driver_id_number}>
            </div>
            <div class="form-group mb-4">
                <label class="text-gray-600">提车人电话</label>
                <input type="text" class="input-field" placeholder="请输入提车人电话" bind:value={$formData.driver_phone}>
            </div>
            <div class="form-group mb-4">
                <label class="text-gray-600">提车时间</label>
                <input type="datetime-local" class="input-field" placeholder="请输入提车时间" bind:value={$formData.exit_at}>
            </div>

            <div class="flex justify-end mt-4">
                <button class="bg-blue-500 text-white px-4 py-2 rounded shadow-sm" on:click={handleSubmit}>提交</button>
            </div>
        </div>
    </div>
</main>

<style lang="scss">
  .form-group {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    &:last-child {
      border-bottom: none;
    }
    label {
      flex: 0 0 100px;
      margin-right: 1rem;
    }
    input, textarea, select {
      flex: 1;
      border: none; // 去除 input 的边框
      padding: 0.5rem; // 添加内边距
      background-color: #f9fafb; // 设置背景颜色
      &:focus {
        outline: none; // 去除 focus 的边框
      }
    }
  }
  .form-group .flex.items-center label {
    margin-right: 2rem;
  }
  .input-area {
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
  }
</style>
